import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { UpOutlined, DownOutlined } from '@ant-design/icons'
import style from './NumberSelector.module.less'

export default class NumberSelector extends Component {
  state = {

  }

  add () {
    const { value, max } = this.props
    if (value + 1 <= max) {
      this.props.onChange(value + 1)
    }
  }

  subtract () {
    const { value, min } = this.props
    if (value - 1 >= min) {
      this.props.onChange(value - 1)
    }
  }

  render () {
    return (
      <div className={style.container}>
        <span className={style.text}>{this.props.value}</span>
        <span className={style.btns}>
          <span className={style.btn} onClick={() => this.add()}><UpOutlined /></span>
          <span className={style.btn} onClick={() => this.subtract()}><DownOutlined /></span>
        </span>
      </div>
    )
  }
}

NumberSelector.propTypes = {
  value: PropTypes.number,
  min: PropTypes.number,
  max: PropTypes.number,
  onChange: PropTypes.func
}
NumberSelector.defaultProps = {
  value: moment().year(),
  min: 0,
  max: 9999,
  onChange: () => {}
}
